
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	out.print("<script>var startDate='"
			+ request.getParameter("startDate") + "';var endDate='"
			+ request.getParameter("endDate") + "' ;</script>");
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>资源分布图</title>
<%@ include file="/WEB-INF/include/include.jsp"%>
<script type="text/javascript"
	src="<%=path%>/js/rms/resapply/ViewInfoByline.js"></script>
</head>
<body>
	<div class="listpage-locked-content">
		<div id="searchWrap"></div>
		<div class="listpage-lk-tbar" id="tbarWrap"></div>
	</div>

	<div class="listpage-content">
		<div class="listpage-grid" id="infoLineWrap"></div>
	</div>

</body>
</html>
<ui:page>
	<ui:formPanel renderTo="searchWrap" height="30">
		<x:items>
			<x:value>
				<x:attr name="padding" type="string">2</x:attr>
				<x:attr name="layout">column</x:attr>
				<x:attr name="border" type="int">0</x:attr>
				<x:attr name="items" type="array">
					<ui:formPanel.date fieldLabel="开始日期" id="startDate"></ui:formPanel.date>
					<ui:formPanel.date fieldLabel="结束日期" id="endDate"></ui:formPanel.date>
					<ui:button handler="drawLine" text="查询" iconCls="icon-search"></ui:button>
				</x:attr>
			</x:value>
		</x:items>
	</ui:formPanel>
	<x:bottomScript>

var store1 = Ext.create('Ext.data.JsonStore', {
    fields: ['date','cpu','mem','disk'],
    data: []
});

Ext.require('Ext.chart.*');
Ext.require('Ext.layout.container.Fit');


var panel1 = Ext.create('widget.panel', {
    autoWidth: true,
    height: 400,
    id:'panel1',
    title:'资源分布图',
    renderTo: 'infoLineWrap',
    layout: 'fit',
    items: {
        xtype: 'chart',
        style: 'background:#fff',
            animate: true,
            store: store1,
            shadow: true,
            id:'lineInfoPanel',
            theme: 'Category1',
            renderTo:'infoLineWrap',
            legend: {
                position: 'right'
            },
            axes: [{
                type: 'Numeric',
                minimum: 0,
                position: 'left',
                fields: ['cpu','mem','disk'],
                title: '各项指标使用量',
                minorTickSteps: 1,
                label:{
                renderer: function(v) {
                return "";
                }
                },
                grid: {
                    odd: {
                        opacity: 1,
                        fill: '#ddd',
                        stroke: '#bbb',
                        'stroke-width': 0.5
                    }
                }
            }, {
                type: 'Category',
                position: 'bottom',
                fields: ['date'],
                title: '查询日期',
	           label: {
	                font: '11px Arial',
	                renderer: function(drawTime) {
	                    return drawTime.split("-")[1]+'-'+drawTime.split("-")[2];
	                }
	            }
            }],
            series: [{
                type: 'line',
                highlight: {
                    size: 7,
                    radius: 7
                },
	            tips: {
	                trackMouse: true,
	                width: 80,
	                height: 40,
	                renderer: function(storeItem, item) {
	                    this.setTitle(storeItem.get('date'));
	                    this.update(storeItem.get('cpu')/500+"个");
	                }
	            },
                axis: 'left',
                xField: 'date',
                yField: 'cpu',
                markerConfig: {
                    type: 'cross',
                    size: 4,
                    radius: 4,
                    'stroke-width': 0
                }
            }, {
                type: 'line',
                highlight: {
                    size: 7,
                    radius: 7
                },
	            tips: {
	                trackMouse: true,
	                width: 80,
	                height: 40,
	                renderer: function(storeItem, item) {
	                    this.setTitle(storeItem.get('date'));
	                    this.update(storeItem.get('mem')+"MB");
	                }
	            },
                axis: 'left',
                smooth: true,
                xField: 'date',
                yField: 'mem',
                markerConfig: {
                    type: 'circle',
                    size: 4,
                    radius: 4,
                    'stroke-width': 0
                }
            }, {
                type: 'line',
                highlight: {
                    size: 7,
                    radius: 7
                },
	            tips: {
	                trackMouse: true,
	                width: 80,
	                height: 40,
	                renderer: function(storeItem, item) {
	                    this.setTitle(storeItem.get('date'));
	                    this.update(storeItem.get('disk')+"MB");
	                }
	            },
                axis: 'left',
                smooth: true,
                fill: true,
                xField: 'date',
                yField: 'disk',
                markerConfig: {
                    type: 'circle',
                    size: 4,
                    radius: 4,
                    'stroke-width': 0
                }
            }]
    }
});
Ext.getCmp("startDate").setValue(startDate);
Ext.getCmp("endDate").setValue(endDate);
if(startDate!=undefined&&startDate!="null"){
	drawLine();
}

</x:bottomScript>
</ui:page>


